<template>
    <div class="login">
        <van-form ref="loginRef" @submit="onSubmit" :show-error-message="false">
            <van-field name="用户名">
                <template #input>
                    <div class="input_icon"><img src="~assets/images/username.png" alt="用户名"></div>
                    <van-field
                    v-model="username"
                    type="username"
                    placeholder="请输入用户名/手机号"
                    clearable
                    :rules="[{ required: true, trigger: 'onBlur', message: '请输入用户名/手机号' }]"
                    />
                </template>
            </van-field>

            <van-field name="密码">
                <template #input>
                    <div class="input_icon"><img src="~assets/images/password.png" alt="密码"></div>
                    <van-field
                    v-model="password"
                    type="password"
                    placeholder="请输入密码"
                    clearable
                    autocomplete='new-password'
                    :rules="[{ required: true, trigger: 'onBlur', message: '请输入密码' }]"
                    />
                </template>
            </van-field>

            <div class="submit">
                <van-button round block type="info" native-type="submit">登录</van-button>
            </div>
        </van-form>

        <div class="login_bottom">
            <van-checkbox v-model="checked" shape="square" icon-size="16px" @change="remberPasswordClick">记住密码</van-checkbox>
            <!-- <a href="javascript:;">忘记密码?</a> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data(){
        return {
            username: '',
            password: '',
            checked: false
        }
    },
    created(){
        this.showRember()
    },
    methods: {
        // 提交登录
        onSubmit(){
            let times = new Date().getTime() + 1*24*3600*1000
            let EncryptionTime = new Date(times).getFullYear() + '/' + (new Date(times).getMonth() + 1) + '/' + new Date(times).getDate();
            let data = {"UserName":this.username,'Pwd':this.password,'EncryptionTime':EncryptionTime}
            this.$request({
                method: 'post',
                url: '/api/Auth/Login',
                data
            }).then(({data}) => {
                if(data.code == 1){
                    this.remberPasswordClick()
                    sessionStorage.setItem('mobileToken', data.data.token)
                    // 储存登录的用户名， 用于我的页面显示用户信息
                    sessionStorage.setItem('shareUserName', data.data.userName)

                    sessionStorage.setItem('allCapacity', data.data.allCapacity)
                    sessionStorage.setItem('capacity', data.data.capacity)

                    this.$router.push('/Home')
                    this.$notify({type: 'success', message: '登录成功!'});
                }else{
                    this.$notify('登录失败!');
                }
            })
        },
        // 记住密码
        remberPasswordClick(){
            if(this.checked == true && this.username.trim() != '' && this.password.trim() != ''){
                let username = this.username
                let password = this.password
                let checked = this.checked
                window.sessionStorage.setItem('LoginUsername', this.username)
                window.sessionStorage.setItem('LoginPassword', this.password)
                window.sessionStorage.setItem('checked', this.checked)

            }else{
                window.sessionStorage.removeItem('LoginUsername')
                window.sessionStorage.removeItem('LoginPassword')
                window.sessionStorage.removeItem('checked')

            }
        },
        // 页面加载时读取记住的账号密码
        showRember(){
            this.checked = Boolean(window.sessionStorage.getItem('checked'))

            if(this.checked){
                this.username = window.sessionStorage.getItem('LoginUsername')
                this.password = window.sessionStorage.getItem('LoginPassword')
            }
        }
    }
}
</script>

<style lang="less" scoped>
.login_bottom /deep/ .van-checkbox__label{
    color: #2a2b2d;
    font-size: 11px;
}

.login{
    .input_icon{
        margin-right: 5px;
        img{
            width: 17px;
        }
    }
    .submit /deep/ .van-button{
        height: 35px!important;
    }
    .submit{
        margin: 10px 0;
    }
    .submit /deep/ .van-button--info{
        background-color: #0099ff;
        border-bottom-color: #0099ff;
    }
    .login_bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        a{
            color: #2a2b2d;
            font-size: 11px;
        }
    }
}
</style>